<template>
	<view>
		<!-- 验证码登录注册 -->
		<view class="main mt-6">
			<!-- 手机号 -->
			<view class="flex align-center border-bottom mt-8" style="height:80rpx ;">
				<!-- 电话选区 -->
				<view style="color:#3D3D3D;">+{{ region }}</view>
				<view class="ml-4 font-lg"> 
					<input type="number" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder" maxlength="11" />
				</view>
				<text v-if="phone" class="icon-a-qingkongpng iconfont ml-auto "  @click="phone = ''"></text>
			</view>
			<!-- 验证码登录 -->
			<view class="flex align-center justify-between mt-5" style="height:80rpx;">
				<view class="font-sm border-bottom flex align-center" style="width: 355rpx;height: 80rpx;" @click="inputCode">
					<input type="number" v-model="code" placeholder="请输入验证码" placeholder-class="placeholder" :disabled="sendCode ? false : true" maxlength="4"/>
					<view v-if="code" class="icon-a-qingkongpng iconfont"  @click="code = ''"></view>
				</view>
				<view class="text-light text-white px-2 py-1" :style="isActiveCode" @click="send()">{{ codeText }}</view>
			</view>

			<!-- 登录/注册 -->
			<view class="text-white mt-9 flex align-center justify-center" :style="isActiveLogin" style="height: 90rpx;" @click="next()">下一步</view>
		</view>
	</view>
</template>

<script>
// 引入弹窗组件
import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
// 验证密码手机号
import { validatePhone, validateCode ,clearSpace} from '@/common/js/validate.js';
import { senMsg } from '../../../apis/login/index.js';
import {checkSms} from '../../../apis/nurse/index.js'
export default {
	data() {
		return {
			phone: '', //手机号码
			code: '', //验证码
			codeText: '发送验证码', //验证码按钮显示内容
			sendCode: false, //是否点击了发送验证码
			isShowPassowrd: true, //是否显示密码

			countTimer: 60, //计时器
			region: 86, //中国电话区域
			resultData: {} //滑块验证数据
		};
	},
	computed: {
		// 动态改变背景颜色
		isActiveCode() {
			return this.phone ? `background-color: #3C8EFF;` : `background: #ADCEFB`;
		},
		isActiveLogin() {
			if (this.code && this.phone) {
				return `background-color: #3C8EFF;`;
			} else {
				return `background: #ADCEFB`;
			}
		}
	},
	components: {
		uniPopup
	},
	onShow() {},
	methods: {
		// 定时器倒计时
		countDownTime() {
			if (this.countTimer == 60) {
				this.codeText = '重新发送' + this.countTimer + 's';
				var timer = setInterval(() => {
					if (this.countTimer > 0) {
						this.countTimer--;
						this.codeText = '重新发送' + this.countTimer + 's';
					} else {
						this.codeText = '发送验证码';
						clearInterval(timer);
						this.countTimer = 60;
					}
				}, 1000);
			}
		},

		// 发送验证码
		async send() {
			if(validatePhone(this.phone, this.region)){
				let res=await senMsg({ mobile:clearSpace(this.phone),uuid: this.$store.state.uuid,type:6 })
				if (res.success) {
					// #ifdef APP-PLUS
					plus.nativeUI.toast(res.codeMsg.msg)
					// #endif
					// #ifndef APP-PLUS
					uni.showToast({
						title: res.codeMsg.msg,
						icon: 'none'
					});
					// #endif
					// 用户可以输入验证码了
					this.sendCode = true;
					// 计时器
					this.countDownTime();
				}
			}
		},
		async next() {
			// 验证手机号
			if (validatePhone(this.phone, this.region) && validateCode(this.code)) {
				// 短信验证码是否正确
				let msg={
					code: clearSpace(this.code),
					mobile: clearSpace(this.phone),
					type:6, //短信验证类型是4
					uuid: this.$store.state.uuid
				}
				let res=await checkSms(msg)
				if(res.success){
					uni.navigateTo({
						url: '../input-password/input-password?phone='+this.phone
					});
				}
				
			}
		},
		inputCode(){
			if(!this.sendCode){
				plus.nativeUI.toast('请点击发送验证码')
				// uni.showToast({
				// 	title:'请点击发送验证码',
				// 	icon:'none'
				// })
			}
		}
	}
};
</script>

<style lang="scss" scoped>
// 输入框输入的时候字体为32rpx
::v-deep.uni-input-input {
	/*deep样式穿透，直接从底部修改*/
	font-size: 32rpx !important;
}
.main {
	padding: 0 80rpx 0 78rpx;
}
.icon-a-qingkongpng {
	font-size: 48rpx;
}
// 遮罩层样式
.mask {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: -88rpx;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999999;
}

// 滑块验证样式
.sunui {
	position: relative;
	width: 652rpx;
	height: 320rpx;
	background-color: #ffffff;
	margin: 0 auto;
}
.close {
	width: 90rpx;
	height: 90rpx;
}
</style>
